<script setup>
import { computed } from "vue";

const data = [
  ["2023/10/23", 1],
  ["2023/10/24", 0],
  ["2023/10/25", 0],
  ["2023/10/26", 0],
  ["2023/10/27", 0],
  ["2023/10/28", 0],
  ["2023/10/29", 0],
  ["2023/10/30", 1],
  ["2023/10/31", 1],
  ["2023/11/01", 2],
  ["2023/11/02", 0],
  ["2023/11/03", 0],
  ["2023/11/04", 0],
  ["2023/11/05", 0],
  ["2023/11/06", 0],
  ["2023/11/07", 0],
  ["2023/11/08", 0],
  ["2023/11/09", 2],
  ["2023/11/10", 1],
  ["2023/11/11", 0],
  ["2023/11/12", 0],
  ["2023/11/13", 0],
  ["2023/11/14", 0],
  ["2023/11/15", 0],
  ["2023/11/16", 0],
  ["2023/11/17", 0],
  ["2023/11/18", 0],
  ["2023/11/19", 0],
  ["2023/11/20", 0],
  ["2023/11/21", 0],
];

const option = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#fff",
      extraCssText: "box-shadow: 1px 4px 21px 0px rgba(100, 101, 102, 0.22)",
      position: "top",
      textStyle: { fontSize: 12, color: "#606266", align: "left" },
      axisPointer: { type: "line", lineStyle: { type: "dashed" } },
    },
    grid: { top: "40px", left: 35, right: 35, bottom: 10, containLabel: true },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: { lineStyle: { color: "#ffffff", width: 0 } },
      axisLabel: { margin: 15, color: "#a5cde1" },
      axisTick: { show: false },
      data: data.map((item) => item[0]),
    },
    yAxis: {
      type: "value",
      axisLine: { show: false },
      axisLabel: { margin: 30, color: "#a5cde1" },
      // splitLine: { show: true, lineStyle: { color: "#244850" } },
      axisTick: { show: false },
    },
    series: [
      {
        name: "发文",
        type: "line",
        data: data,
        colorBy: "series",
        showSymbol: false,
        markPoint: {
          symbol: "circle",
          symbolSize: 10,
          itemStyle: { color: "black", borderWidth: 2, borderColor: "#6ae6ff" },
          data: data.map((item) => ({ coord: item })),
        },
      },
    ],
    color: ["#6ae6ff", "#fcee58"],
    legend: {
      data: ["发文"],
      orient: "horizontal",
      show: true,
      left: 0,
      top: 0,
      icon: "roundRect",
      itemGap: 10,
      itemWidth: 20,
      itemHeight: 3,
      textStyle: { color: "#8391a5", fontSize: 12 },
    },
  };
});
</script>

<template>
  <div class="chart">
    <nf-charts :options="option" />
  </div>
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 300px;
}
</style>
